<template>
  <div>
    <we-nav-bar></we-nav-bar>
    <pdf :src="src"> </pdf>
    <div class="load">
      <van-button @click="clickDown" type="primary">报告下载</van-button>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  components: {
    pdf,
  },

  data() {
    return {
      receiveData: [],
      src: "",
    };
  },

  created() {
    this.receiveData = this.$route.query;
    this.src = "data:application/pdf;base64," + this.receiveData.filepdfData;
  },

  methods: {
    clickDown() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 跳转至提示页
        this.$router.push({
          path: "/wechat/nucleic-acid-report-query/prompt",
          query: this.receiveData,
        });
      } else {
        // 下载pdf
        fetch(this.src, {
          method: "get",
          responseType: "arraybuffer",
        })
          .then((res) => {
            if (res.status !== 200) {
              return res.json();
            }
            return res.arrayBuffer();
          })
          .then((blobRes) => {
            // 生成 Blob 对象，设置 type 等信息
            const e = new Blob([blobRes], {
              type: "application/octet-stream",
              "Content-Disposition": "attachment",
            });
            // 将 Blob 对象转为 url
            const link = window.URL.createObjectURL(e);
            let a = document.createElement("a");
            a.href = link;
            a.download = "核酸检测.pdf";
            a.click();
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.load {
  text-align: center;
}
</style>
